<template>
  <div class="home">
    <div class="left">
      <div class="title">{{ formData.data.title }}</div>
      <div class="tag mt20">
        <span v-for="item in formData.data.tag" :key="item">{{ item }}&nbsp;&nbsp;</span>
      </div>
      <div class="auth mt20 mb20">
        <span>作者:</span><em>{{ formData.data.author }}</em> <span>创建时间:</span
        ><em>{{ formatTime(formData.data.createdAt) }}</em> <span>更新时间:</span
        ><em>{{ formatTime(formData.data.updateAt) }}</em>
      </div>
      <div class="file">
        <upLoadList :fileList="files"></upLoadList>
      </div>
      <div class="dept">{{ formData.data.dept }}</div>
      <div class="content" v-html="formData.data.content"></div>
    </div>
    <div class="right">
      <el-button type="primary" @click="toEdit()">编辑</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getDataByIdApi } from '@/api/km'
import upLoadList from '@/components/UploadList.vue'
import dayjs from 'dayjs'
const router = useRouter()
const route = useRoute()
const formData = reactive({
  data: {
    tag: []
  }
})
let files = ref<any>([])
//跳转到编辑页面
const toEdit = () => {
  router.push({ path: '/knowledge/new', query: { id: route.query.id } })
}
//获取详情
const getDetail = async () => {
  const { data } = await getDataByIdApi({ id: route.query.id })
  if (data) {
    formData.data = data
    formData.data.tag = data.tag.split(',')
    files.value = formData.data.fileList === '' ? '' : JSON.parse(formData.data.fileList)
  }
}
//计算属性 代替 vue2 filter 格式化时间
const formatTime = computed(() => {
  return (time: string) => {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
  }
})
onMounted(() => {
  if (route.query.id) getDetail()
})
</script>
<style scoped lang="scss">
.home {
  display: flex;
  height: 100%;
  .left {
    width: calc(100% - 230px);
    height: 100%;
    padding: 20px;
    border-right: 1px solid #dddddd;
    overflow-y: auto;
    .title {
      font-size: 16px;
      font-weight: 600;
    }
    .dept {
      margin: 20px 0;
    }
    .tags {
      margin-left: 20px;
    }
    .auth {
      span {
        color: #aeaeae;
      }
      em {
        font-style: normal;
        margin-left: 10px;
        margin-right: 30px;
      }
    }
  }
  .right {
    width: 230px;
    padding: 20px;
    text-align: center;
  }
}
</style>
